<template>
  <section>
    <div class="register">
      <span class="glyphicon glyphicon-menu-left pull-left" @click="get"></span>
      <span class="register-span">重置密码</span>
    </div>
    <div class="blank"></div>
    <div class="centre">
      <input type="text" placeholder="账号" class="form-control input" v-model="username">
      <input type="password" placeholder="旧密码" class="form-control input" v-model="oldPassword">
      <input type="password" placeholder="请输入新密码" class="form-control input" v-model="newPassword">
      <input type="password" placeholder="请确认密码" class="form-control input" v-model="notarize">
      <input type="text" placeholder="验证码" class="form-control input" v-model="code">
      <div class="center-verify">
        <img :src="src" alt="">
        <span class="center-span1">看不清</span>
        <span @click="update" class="center-span2">换一张</span>
      </div>
    </div>
    <div class="end">
      <button @click="changePassword" class="btn">确认修改</button>
    </div>
    <!--弹框-->
    <mt-popup v-model="popupVisible" position="center"class="animated bounceIn center-popup" :closeOnClickModal='false' :modal="false">
      <div >
        <i class="iconfont">&#xe604;</i>
        <p class="p">{{content}}</p>
        <button class="btn btn-success" @click="popup">确认</button>
      </div>
    </mt-popup>

  </section>
</template>

<script>
  import Vue from 'vue'
    export default {
        name: "Reset",
      data() {
        return {
          src:'',// 存储验证码
          username:'',// 用户名
          oldPassword:'',// 旧密码
          newPassword:'', // 新密码
          notarize:'',//确认密码
          code:'',//二维码
          popupVisible:false, // 判断弹框是否显隐
          content:'',//存储弹框里的值
        }
      },
      methods:{
        update(){
          // 发起请求,获取二维码
          const url = "https://elm.cangdu.org/v1/captchas";
          this.$http({
            method: 'post',
            url: url,
            withCredentials: true,
          }).then((res) => {
            this.src = res.data.code
          });
        },
        //修改密码
        changePassword(){
          this.popupVisible = !this.popupVisible;
          const url = "https://elm.cangdu.org/v2/changepassword";
          this.$http({
            method: 'post',
            url: url,
            withCredentials: true,
            data:{
              username: this.username,
              oldpassWord: this.oldPassword,
              newpassword: this.newPassword,
              confirmpassword: this.notarize,
              captcha_code: this.code
            }
          }).then((res) => {
            // console.log(res.data)
            if (res.data.success == '密码修改成功'){
              this.content = res.data.success
            }else{
              this.content = res.data.message
            }
          });
        },
        popup(){
          this.popupVisible = !this.popupVisible
        },
        // 返回上一层
        get(){
          history.go(-1)
        }
      },
      created(){
        this.update();// 刷新二维码
      }
    }
</script>

<style scoped>
  .register{
    text-align: center;
    color: white;
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    background-color: dodgerblue;
    font-size: 0.16rem;
  }
  .glyphicon{
    color: white;
    font-weight:900;
    margin-left: 0.1rem;
    margin-top: 0.1rem;
  }
  .register-span{
    font-weight:900;
  }
  .blank{
    width: 100%;
    height: 0.15rem;
    background-color: #F6F6F6;
  }
  .centre{
    width: 100%;
  }
  .centre input{
    font-size: 0.16rem;
    width: 100%;
    height: 0.5rem;
  }
  .center-verify{
    right: 0.3rem;
    position: relative;
    font-size: 0.12rem;
  }
  .center-span1{
    position: absolute;
    top: -0.4rem;
    right: -0.25rem;
  }
  .center-span2{
    color: #498BC7;
    position: absolute;
    top: -0.2rem;
    right: -0.25rem;
  }
  .center-verify img{
    position: absolute;
    width: 0.5rem;
    height: 0.4rem;
    top: -0.42rem;
    right: 0.15rem;
  }
  .end{
    width: 96%;
    margin: auto;
  }
  .end button{
    font-size: 0.16rem;
    color: white;
    background-color: #4CDA64;
    width: 100%;
    height: 0.5rem;
    margin-top: 0.2rem;
  }
  .iconfont{
    font-family:"iconfont" !important;
    font-size:1rem;
    font-style:normal;
    color: #F8BB86;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
  .center-popup{
    position: absolute;
    top: 30%;
    left: 0.25rem;
    text-align: center;
    border-radius: 0.1rem;
    width: 90%;
  }
  .center-popup p{
    font-size: 0.2rem;
    color: #000;
  }
  .center-popup button{
    width: 100%;
    font-size: 0.2rem;
    font-weight: 900;
  }
  .iconfont{
    font-family:"iconfont" !important;
    font-size:1rem;
    font-style:normal;
    color: #F8BB86;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }

</style>
